<template>
	<view class="container">
		<view class="bg-colore">
		</view>
		<!-- <topLogo></topLogo> -->
		<view class="wrap">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" placeholder="搜索商品" cancelButton="always">
			</uni-search-bar>
			<view class="title">
				历史搜索
			</view>
			<view class="ls-list">
				<view class="list list-1" v-for="(item,index) in sslist.myss" :key="index" v-if="index<10">
					<text class="title" @click="$public.navto('/pages/mall/index', { word: item.title })">{{item.title}}</text>
					<uni-icons type="closeempty" @click="deteleSS(item.ssId)" class="closecss"></uni-icons>
				</view>
			</view>
			<view class="title">
				搜索热榜
			</view>
			<view class="ls-list">
				<view class="list" v-for="(item,index) in sslist.hot" :key="index" v-if="index<10"
					@click="$public.navto('/pages/daPai/list', { word: item.title })">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				sslist: {
					hot: [],
					myss: []
				}
			};
		},
		onLoad() {

		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
			this.getSsHotList()
		},
		methods: {
			search(e) {
				if (this.searchValue) {
					this.addSs(this.searchValue)
				}
			},
			getSsHotList() {
				this.$public.htmlPost("/api/getSsHotList").then((res) => {
					let data = res.data
					if (data.code == 0) {
						this.sslist = data.data
					}
				})
			},
			deteleSS(ssId) {
				this.$public.htmlPost("/api/deteleSs", {
					ssId: ssId
				}).then((res) => {
					this.getSsHotList()
				})
			},
			addSs(title) {
				this.$public.htmlPost("/api/addSs", {
					title: title
				}).then((res) => {
					this.$public.navto("/pages/daPai/list", {
						word: title
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-colore {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: -1;
	}

	.wrap {
		padding: $uni-wrap-padding;

		.title {
			font-size: 28rpx;
			padding: 40rpx 0;
			color: #333333;
		}

		.ls-list {
			display: flex;
			flex-wrap: wrap;

			.list {
				padding: 0 40rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #f6f5f5;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 25rpx;

				&.list-1 {
					padding: 0;

					.title {
						padding-left: 40rpx;
					}

					.closecss {
						padding-left: 20rpx;
						padding-right: 40rpx;
					}
				}

			}
		}
	}
</style>